<template>
	<div>
		<headNav title="强化练习"></headNav>
		<navSmall @getNav='getNav'></navSmall>
		<div class="subjectBox">
			<span v-for="(item,index) in subjectList" :key='item.subjectId' :class="{'active': subjectId == item.subjectId}" @click="chooseSubject(item,index)">
				{{item.subjectName}}
			</span>
		</div>
		<div class="content">
			<div class="bookBox" v-if="navCurrent == 0">
				<span v-if="selectObj">{{selectObj.bookName}}({{selectObj.versionName}})</span>
				<span v-else>
					暂无版本
				</span>
				<span @click="openChoose">
					切换版本
					<img src="@/assets/img/you.png" alt="">
				</span>
			</div>
			<div class="totalBox">
				<div class="totalOne">
					<p>累计答题</p>
					<p class="num">{{intensivDetail ? intensivDetail.answerCount : 0}}</p>
				</div>
				<span class="line">
                
            	</span>
				<div class="totalOne">
					<p>正确率</p>
					<p class="num">{{intensivDetail ? parseFloat((intensivDetail.correctRate*100).toFixed(2)) : 0}}%</p>
				</div>
			</div>
			<div class="makeBox">
				<tree :data='knowledgesDto' @answer='answer'></tree>
			</div>
		</div>
		<chooseEdition
		v-if="disableFlag"
		:disableFlag="disableFlag"
		:stageId='stageId'
		:gradeId='gradeId'
		:subjectId='subjectId' 
		@handleClose='handleClose'
		@confirm='confirm'>
		</chooseEdition>
	</div>
</template>
<script>
import headNav from '@/components/headNav/headNav'
import navSmall from './headNav'
import chooseEdition from './chooseEdition'
import tree from './tree/tree'
import answerVue from '../partyBuild/study/answer.vue'
export default {
	name: 'list',
	components: {
		headNav, navSmall, chooseEdition, tree
	},
	data () {
		return {
			disableFlag: false,
			navCurrent: 0,
			stageId: '',
			gradeId: '',
			subjectList: [],
			currentSubject: 0,
			intensivDetail: '',
			knowledgesDto: [],
			versionId: '',
			versionItem: '',
			bookItem: ''
		}
	},
	computed: {
		selectObj () {
			return this.$store.state.study.selectObj
		},
		subjectId () {
			return this.$store.state.study.subjectId
		}
	},
	activated () {
		if (this.$store.state.study.isFirst) {
			// this.intensivDetail = ''
			// this.knowledgesDto = []
			this.getIntensiv()
		} else {
			this.getStudent().then(
				() => {
					this.getSubjects().then(
						() => {
							this.getVersion().then(
								() => {
									this.getbook().then(
										() => {
											this.save()
											this.getIntensiv()
										}
									)
								}
							)
						}
					)
				}
			)
		}
	},
	methods: {
		getAll () {
			this.intensivDetail = ''
			this.knowledgesDto = []
			this.$store.commit('study/setSelectObj', '')
			this.getVersion().then(
				() => {
					this.getbook().then(
						() => {
							this.save()
							this.getIntensiv()
						}
					)
				}
			)
		},
		save () {
            var obj = {
				versionId: this.versionId,
				versionName: this.versionItem.schoolBookVersionName,
                bookId: this.bookItem.schoolBookId,
                bookName: this.bookItem.schoolBookName
			}
            this.$store.commit('study/setSelectObj', obj)
        },
		// 获取学生信息 
		getStudent () {
			var params = {
				id: this.$store.state.user.studentId
			}
			return new Promise((resolve, reject) => {
				this.$store.dispatch('study/GetStudent', params).then(
					res => {
						this.stageId = res.stageId
						this.gradeId = res.gradeId
						resolve()
					}
				)
			})
		},
		// 获取科目 
		getSubjects () {
			var params = {
				stageId: this.stageId
			}
			return new Promise((resolve, reject) => {
				this.$store.dispatch('study/GetSubjects', params).then(
					res => {
						if (res.length > 0) {
							this.subjectList = res
							if (!(this.subjectId && this.subjectId != res[0].subjectId)) {
								this.$store.commit('study/setSubjectId', res[0].subjectId)
							}
							resolve()
						}
					}
				)
			})
		},
		getVersion () {
            var params = {
                StageId: this.stageId,
                SubjectId: this.subjectId,
			}
			return new Promise((resolve, reject) => {
				this.$store.dispatch('study/GetVersion', params).then(
					res => {
						if (res.length > 0) {
							this.versionList = res
							if (this.selectObj && this.selectObj.versionId != res[0].schoolBookVersionId) {
								this.versionId = this.selectObj.versionId
								this.versionItem = {schoolBookVersionName: this.selectObj.versionName}
							} else {
								this.versionId = res[0].schoolBookVersionId
								this.versionItem = res[0]
							}
							resolve()
						}
					}
				)
			})
        },
        getbook () {
            var params = {
                bookVersionId: this.versionId,
                gradeId: this.gradeId,
                SubjectId: this.subjectId
			}
			return new Promise((resolve, reject) => {
				this.$store.dispatch('study/GetBook', params).then(
					res => {
						if (res.length > 0) {
							this.bookList = res
							if (this.selectObj && this.selectObj.bookId != res[0].schoolBookId) {
								this.bookItem = {schoolBookId: this.selectObj.bookId, schoolBookName: this.selectObj.bookName}
							} else {
								this.bookItem = res[0]
							}
							resolve()
						}
					}
				)
			})
        },
		// 获取练习列表
		getIntensiv () {
			if (!this.selectObj) {
				return
			}
			var params = {
				KnowledgeOrChapter: this.navCurrent == 0 ? 2 : 1,
				SubjectId: this.subjectId,
				VersionId: this.selectObj.versionId,
				BookId: this.selectObj.bookId,
				StudentId: this.$store.state.user.studentId
			}
			this.$store.dispatch('study/GetIntensiv', params).then(
				res => {
					this.intensivDetail = res
					this.knowledgesDto = res.knowledgesDto
				}
			)
		},
		chooseSubject (item, index) {
			this.$store.commit('study/setSubjectId', item.subjectId)
			this.getAll()
		},
		openChoose () {
			this.disableFlag = true
		},
		handleClose () {
			this.disableFlag = false
		},
		confirm () {
			this.disableFlag = false
			this.getIntensiv()
		},
		getNav (val) {
			this.navCurrent = val
			this.getIntensiv()
		},
		answer (item) {
			this.getIntensivQuestion(item)
		},
		// 获取题目列表
		getIntensivQuestion (item) {
			var params = {
				KnowledgeOrChapter: this.navCurrent == 0 ? 2 : 1,
				SubjectId: this.subjectId,
				KnowledgeOrChapterId: item.id,
				StudentId: this.$store.state.user.studentId
			}
			this.$store.dispatch('study/GetIntensivQuestion', params).then(
				res => {
					this.$store.commit('study/setKeyPointsData', item)
					this.$store.commit('study/setAllSubjectArr', res)
					this.$router.push('answer')
				}
			)
		}
	}
}
</script>
<style lang='less' scoped>
	.subjectBox{
		padding: 0.2rem 0.24rem;
		overflow: auto;
		white-space: nowrap;
		>span{
			display: inline-block;
			padding: 0.12rem 0.32rem;
			color: #888888;
			border-radius: 0.36rem;
			font-size: 0.28rem;
		}
		>.active {
			background: #128FEF;
			color: #fff;
		}
	}
	.content{
		padding: 0.32rem 0.24rem;
		background: #fff;
		.bookBox{
			color: #666666;
			font-size: 0.28rem;
			display: flex;
			justify-content: space-between;
			margin-bottom: 0.32rem;
			img{
				width: 0.1rem;
			}
		}
		.totalBox{
			padding: 0.32rem 0;
			box-shadow: 0px 2px 9px 0px rgba(66, 66, 66, 0.2);
			border-radius: 5px;
			.totalOne{
				width: 48%;
				display: inline-block;
				text-align: center;
				color: #999999;
				font-size: 0.28rem;
				.num{
					font-size: 0.4rem;
					font-weight: bold;
					color: #000000;
				}
			}
			.line{
				display: inline-block;
				background: #E6E6E6;
				border-radius: 0.01rem;
				width: 0.02rem;
				height: 0.68rem;
			}
		}
		.makeBox{
			margin-top: 0.2rem;
		}
		
	}
</style>